<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>查看采购单</span>
          </div>
          <div class="main_crumbs_rt">
            <el-button v-repeatClick @click="print">打印</el-button>
            <el-button v-repeatClick @click="exportPurchaseInfo"
              >导出</el-button
            >
          </div>
        </div>
        <div v-loading="mainLoading">
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                采购单号：<span>{{ info.order_sn }}</span>
              </li>
              <li>
                采购方式：<span>{{ base.mode[info.mode] }}</span>
              </li>
              <li>
                采购员/供应商：<span>{{
                  info.mode == 1
                    ? info.buyer
                      ? info.buyer.name
                      : ""
                    : info.supplier
                    ? info.supplier.name
                    : ""
                }}</span>
              </li>
              <li>
                类型：<span>{{ base.type[info.type] }}</span>
              </li>
              <li>
                单据状态：<span>{{ base.status[info.status] }}</span>
              </li>
              <li>
                采购日期：<span>{{
                  parseTime(info.purchase_time, "{y}-{m}-{d}")
                }}</span>
              </li>
              <li>
                需采购品种：<span>{{ info.all }}</span>
              </li>
              <li>
                已采购品种：<span>{{ info.ed }}</span>
              </li>
              <li>
                采购金额：<span>{{ info.money }}</span>
              </li>
              <li class="main_w100">
                备注：<span>{{ info.remark }}</span>
              </li>
            </ul>
          </div>

          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_table marginTop0" style="min-height: 150px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.purchase_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              :summary-method="getSummaries"
              show-summary
            >
              <el-table-column label="序号" prop="goods.name" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="name"
                class-name="main_hei"
                ><template slot-scope="scope">
                  {{ scope.row.goods_list.name }}【{{ scope.row.spu_name }}】
                </template>
              </el-table-column>
              <el-table-column
                label="单位"
                prop="spu_name"
                class-name="main_hei"
              />
              <el-table-column
                label="状态"
                prop="purchase_price"
                class-name="main_hei"
              >
                <template slot-scope="scope">{{
                  scope.row.status == 0 ? "采购中" : "采购完成"
                }}</template>
              </el-table-column>
              <el-table-column
                label="需采量"
                prop="purchase_num"
                class-name="main_hei"
              />
              <el-table-column
                label="已采量"
                prop="purchased_num"
                class-name="main_hei"
              />
              <el-table-column
                label="未采量"
                prop="un_purchase_num"
                class-name="main_hei"
              />
              <el-table-column
                label="采购均价"
                prop="price"
                class-name="main_hei"
              />
              <el-table-column label="采购金额" class-name="main_hei">
                <template slot-scope="scope">{{
                  parseFloat(scope.row.money) | twoPlace
                }}</template>
              </el-table-column>
              <el-table-column
                v-if="info.type == 1"
                label="预定明细"
                class-name="main_hei"
              >
                <template slot-scope="scope">{{
                  scope.row.order_info
                }}</template>
              </el-table-column>
              <el-table-column
                label="备注"
                prop="remark"
                class-name="main_hei"
              />
            </el-table>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>其他</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li class="main_w100">
                其他费用：<span>{{ info.other_money | other_money }}</span>
              </li>
              <!-- <li class="main_w100">
                备注：<span>{{ info.remark }}</span>
              </li> -->
              <li class="main_w100 box">
                上传的相关凭证：
                <span class="box main_xqi">
                  <div
                    class="main_xqi_i"
                    v-for="(pics, index) in info.pics"
                    :key="index"
                  >
                    <el-image
                      fit="fill"
                      :src="pics"
                      :preview-src-list="info.pics"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                </span>
              </li>
            </ul>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>结算记录</div>
          </div>
          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="settlement_logs"
              element-loading-text="加载中"
              fit
              highlight-current-row
            >
              <el-table-column label="结算单号" prop="" class-name="main_hei"
                ><template slot-scope="scope">
                  {{
                    scope.row.advice_settlement
                      ? scope.row.advice_settlement.order_sn
                      : ""
                  }}
                  <i
                    class="el-icon-document-copy set_default"
                    style="margin-left: 10px"
                    @click="handleCopy(scope.row)"
                  ></i>
                </template>
              </el-table-column>
              <el-table-column
                label="单据类型"
                prop="operate.name"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <span :class="'type' + scope.row.type">
                    {{ scope.row.type == 1 ? "采购单" : "退货单" }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="金额"
                prop="pay_money"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  {{ scope.row.pay_money }}
                </template>
              </el-table-column>

              <el-table-column
                label="结算时间"
                prop="created_at"
                class-name="main_hei"
              >
                <template slot-scope="scope">{{
                  parseTime(scope.row.created_at)
                }}</template>
              </el-table-column>
            </el-table>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>生命周期</div>
          </div>
          <div class="main_table marginTop0" style="min-height: 230px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="logs"
              element-loading-text="加载中"
              fit
              highlight-current-row
            >
              <el-table-column
                label="管理员"
                prop="admin.name"
                class-name="main_hei"
              />
              <el-table-column
                label="操作"
                prop="operate.name"
                class-name="main_hei"
              />
              <el-table-column
                label="内容"
                prop="content"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div
                    v-for="(content, index) in scope.row.content"
                    :key="index"
                    class="marginTop5 marginBottom5"
                  >
                    {{ content }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="IP" prop="ip" class-name="main_hei" />
              <el-table-column
                label="时间"
                prop="created_at"
                class-name="main_hei"
              >
                <template slot-scope="scope">{{
                  parseTime(scope.row.created_at)
                }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 打印子组件 -->
      <order-print
        ref="printTemplate"
        v-show="false"
        id="printname"
      ></order-print>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getLodop } from "@/utils/LodopFuncs";
import {
  purchase_info,
  purchase_base,
  export_purchase_info,
} from "@/api/purchasing/purchasingPurchase";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, copyToClipboard } from "@/utils/index";
import { puzzleImg } from "@/api/currency";
import OrderPrint from "@/views/order/orderPrint.vue";
export default {
  components: {
    OrderPrint,
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  filters: {
    other_money(data) {
      let zf = "";
      if (data) {
        JSON.parse(data).map((e) => {
          if (e.descr) {
            zf += "描述:" + e.descr + "  ";
          }
          if (e.money) {
            zf += "金额:" + e.money + "  ";
          }
        });
      }
      return zf;
    },
  },
  data() {
    return {
      // 时间
      parseTime,
      // 基本信息
      info: {
        pics: [],
        purchase_time: "2020-01-01",
      },
      logs: [],
      base: {
        mode: ["自采"],
        buyer: ["自采"],
        supplier: ["自采"],
        type: ["自采"],
        status: ["自采"],
      },
      puzzleImg,
      listLoading: false,
      mainLoading: false,
      // id
      id: this.$route.params.id,
      settlement_logs: [],
    };
  },
  created() {
    // 基本信息
    this.purchase_base();
    this.purchase_info();
  },
  methods: {
    // 基本信息
    purchase_info() {
      this.mainLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      purchase_info(data).then((res) => {
        if (res.errcode == 0) {
          res.data.logs.map((e) => {
            if (e.content) {
              e.content = JSON.parse(e.content);
            }
          });
          res.data.info.pics = res.data.info.pics
            ? res.data.info.pics.split(",").map((e) => {
                return this.avatar.domain + e;
              })
            : [];
          this.logs = res.data.logs;
          this.info = res.data.info;
          this.settlement_logs = res.data.list;
          this.mainLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    purchase_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      purchase_base(data).then((res) => {
        if (res.errcode == 0) {
          this.base = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 导出
    exportPurchaseInfo() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      export_purchase_info(data)
        .then((res) => {
          const link = document.createElement("a");
          // let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          let blob = new Blob([res], {
            type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = "采购单";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
    // 打印
    print() {
      let id = this.id;
      this.$refs.printTemplate.$emit("demo", { id: id, type: "purchase" });
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
        }
      });
      sums[8] = this.info.money;
      sums.forEach((item, index) => {
        if (index != 0 && index != 8) {
          sums[index] = " ";
        }
      });
      return sums;
    },
    // 结算单号复制
    handleCopy(row) {
      let order_sn = row.advice_settlement.order_sn;
      if (!order_sn) {
        return;
      }
      copyToClipboard(order_sn); // 需要复制的文本内容
      this.$message.success(`${order_sn},复制成功！`);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
          .main_xqi_i {
            position: relative;
            width: 120px;
            overflow: hidden;
          }
          /deep/.el-image .el-image__inner {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
          /deep/.el-image .image-slot img {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
/deep/.el-table__empty-text {
  line-height: 150px;
}

.type1 {
  color: #03a98e;
}
.type2 {
  color: red;
}

/deep/.settlement .el-table tr {
  .set_default {
    display: none;
    margin-left: 10px;
  }
}
/deep/.settlement .el-table tr:hover {
  .set_default {
    display: inline-block;
    cursor: pointer;
  }
}
/deep/ .settlement .el-table--small td .cell {
  display: flex;
  align-items: center;
  height: auto;
}
</style>
